<template>
	<div class="cloudStore">
		<!-- <image class="back-btn" src="/static/headerIcon/leftIcon.png" mode="" @tap="handleBack"></image> -->
		<headerCom style="padding:0 28rpx" @target="handleTarget" />
		<!-- <div class='tabbarType'>
			<div class="status-item" :style="{ background: backgroundStyle1 }"
				@click='handleSelectcStatus(statusArr[0])'>
				<div v-if="statusArr[0].type !== paramer.state ">{{statusArr[0].title}}</div>
			</div>
			<div class="status-item" :style="{ background: backgroundStyle2 }"
				@click='handleSelectcStatus(statusArr[1])'>
				<div v-if="statusArr[1].type !== paramer.state ">{{statusArr[1].title}}</div>
			</div>
			<div class="status-item" :style="{ background: backgroundStyle3 }"
				@click='handleSelectcStatus(statusArr[2])'>
				<div v-if="statusArr[2].type !== paramer.state ">{{statusArr[2].title}}</div>
			</div>
		</div> -->
		<div class='tabbarType' :class="[paramer.state ==1?'tabbarTypeA':'tabbarTypeB']">
			<div class="status-item" @click='handleSelectcStatus(statusArr[0])'>
				<div>{{statusArr[0].title}}</div>
			</div>
			<!-- 	<div class="status-item" :style="{ background: backgroundStyle2 }"
				@click='handleSelectcStatus(statusArr[1])'>
				<div v-if="statusArr[1].type !== paramer.state ">{{statusArr[1].title}}</div>
			</div> -->
			<div class="status-item" @click='handleSelectcStatus(statusArr[1])'>
				<div>{{statusArr[1].title}}</div>
			</div>
		</div>
		<div style="padding:0 28rpx;box-sizing: border-box;" v-if='paramer.state==1'>
			<div class='keyOnUp' v-if="goodsData.length!=0">
				<div class="text">点击按钮，快速上架全部商品</div>
				<div class="aKeyBtn" @click="handleSellAllGoods">一键流转</div>
			</div>
		</div>
		<scroll-list ref="list" style="margin-top: 20rpx;" :option="{
			page: paramer.pageNum, // 分页
			size: 20, // 分页大小
			auto:true
		}" @load="(e)=>handleList(e,1)" @refresh="e=>handleList(e,2)">
			<div class="goodsContainer">

				<div class="market-item" :data-type="item.state" v-for="item in goodsData" :key="item.id">
					<clouldGoods :status='paramer.state' :data="item" @callBack="handleCallBack" @payFun="payProp" />
				</div>
			</div>
		</scroll-list>

		<subTabbar />

		<view class="prop" v-if="isProp">
			<view class="buyProp">
				<image src="../../static/icon/close.png" class="closeImg" @tap="()=>{isProp = false}"></image>
				<view class="title">支付密码</view>
				<view class="numTitle">支付密码</view>
				<input placeholder="请输入支付密码" class="input-prop" placeholder-class="placeholder" type="number"
					v-model="payPassword" />
				<view class="sures" @tap="handleUpGoods">确定</view>
			</view>
		</view>

		<welFareCom :show='welfareShow' @close='welfareShow=false' />
	</div>
</template>

<script>
	import {
		myGoods,
		sellAllGoods,
		takeUserGoodsToOrder,
		setWelfareType,
		personalData,
		takeUserGoodsToIntegral
	} from "../../api/api.js"
	import welFareCom from "@/components/basicComponent/welfare.vue"
	import subTabbar from "../../components/basicComponent/subTabbar.vue"
	import headerCom from "../../components/basicComponent/market/headerCom.vue"
	import clouldGoods from "../../components/basicComponent/cloudGoodsItem.vue"
	export default {
		name: 'cloudStore',
		data() {
			return {
				welfareShow: false,
				welfareType: 1,
				isProp: false,
				payPassword: '',
				goodsData: [],
				statusArr: [{
						type: 1,
						title: '云店商品'
					},
					{
						type: 3,
						title: '已售出'
					}
				],
				paramer: {
					pageNum: 1,
					pageSize: 20,
					state: 1,
					queryKey: ''
				}
			}
		},
		components: {
			headerCom,
			clouldGoods,
			welFareCom,
			subTabbar
		},
		onShow() {

		},
		mounted() {
			// this.handleGetMyGoods()
			let that = this
			personalData().then(res => {
				if (res.code == 200 && res.data) {
					if (res.data.welfareRightsType == '0') {
						// that.$refs.welfare.open('bottom')
						// this.welfareShow = true;
					}
				}
			})
		},
		computed: {
			backgroundStyle1() {
				return this.paramer.state === 1 ?
					"url('../../static/market/select-3.png') 0px -20rpx / 107%" :
					'';
			},
			backgroundStyle2() {
				return this.paramer.state === 2 ?
					"url('../../static/market/select-2.png') -10rpx -22rpx / 107%" :
					'';
			},
			backgroundStyle3() {
				return this.paramer.state === 3 ?
					"url('../../static/market/select-1.png') -20rpx -24rpx / 110%" :
					'';
			}
		},

		methods: {
			payProp(value) {
				this.payPassword = '';
				this.isProp = true;
				this.orderFormId = value;
			},
			handleUpGoods() {
				takeUserGoodsToIntegral({
					id: this.orderFormId,
					password: this.payPassword
				}).then(res => {
					uni.showToast({
						title: '操作成功',
						icon: 'none',
						duration: 2000,
						success: () => {
							this.isProp = false;
							this.handleList('', 2)
						}
					})
				})
			},
			handleTarget(value) {
				this.paramer.queryKey = value
				this.paramer.pageNum = 1
				this.goodsData = []
				this.handleList('', 1)
			},
			handleSellAllGoods() {
				// 一键上架
				sellAllGoods().then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '流转成功',
							icon: 'none',
							success: () => {
								this.handleList('', 2)
							}
						})

					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
						})
					}
				})
			},
			activeStatusBg(item) {
				if (item.type != this.paramer.state) return

				if (this.paramer.state == 1) {
					return {
						background: "url('../../static/market/select-3.png') 0px -20rpx / 107%",
					}
				} else if (this.paramer.state == 2) {
					return {
						background: "url('../../static/market/select-2.png') -10rpx -22rpx / 107%"
					}
				} else if (this.paramer.state == 3) {
					return {
						background: "url('../../static/market/select-1.png') -20rpx -24rpx / 110%"
					}
				}

				return {
					background: ''
				}

			},
			handleUpTakeUserGoodsToOrder() {
				takeUserGoodsToOrder({
					id: id,
					addressId: this.$props.addresssInfoSoon.id,
					remark: this.remarks || '',
					password: this.payPassword
				}).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: '操作成功',
							icon: 'none',

							success: () => {
								this.isProp = false;
								this.handleList('', 2)
								// setTimeout(() => {
								// 	uni.navigateTo({
								// 		url: "/pages/mine/myOrder"
								// 	})
								// }, 1000)

							}
						})
					}

					console.log('takeUserGoodsToOrder', res)
				})
			},
			handleSelectcStatus(item) {
				// 切换状态
				this.paramer.state = item.type
				this.paramer.pageNum = 1
				this.goodsData = []
				this.handleList('', 1)
			},
			handleList(item, index) {
				if (index == 2) {
					this.goodsData = []
					this.paramer.pageNum = 1
				}
				myGoods(this.paramer).then(res => {
					this.paramer.pageNum++;
					this.goodsData = [...this.goodsData, ...res.data.records]
					if (index == 1) {
						// 加载
						this.$refs.list.loadSuccess({
							list: this.goodsData,
							total: res.data.total
						});
					} else {
						// 刷新
						this.$refs.list.refreshSuccess({
							list: this.goodsData,
							total: res.data.total
						});
					}
				})
			},
			handleCallBack(key) {
				this.handleList('', 2)
				console.log('回调成功')
			},
			handleBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}

	}
</script>

<style lang="less" scoped>
	.cloudStore {
		position: relative;
		padding: 180rpx 0rpx 180rpx 0rpx;
		box-sizing: border-box;
	}
	
	.back-btn {
		position: fixed;
		left: 20rpx;
		top: 70rpx;
		z-index: 3;
		width: 44rpx;
		height: 44rpx;
	}

	.tabbarType {
		width: 100%;
		height: 160rpx;
		background: url("../../static/market/typeBg.png") no-repeat;
		background-size: 100% 100%;
		display: flex;
		// display: grid;
		// grid-template-columns: 260rpx 270rpx 260rpx;
		text-align: center;
		line-height: 142rpx;

		.status-item {
			width: 50%;
			font-weight: bold;
			font-size: 40rpx;
			color: #151822;
		}

		// .activeStatus {
		// 	background: red;
		// }
	}

	.tabbarTypeA {

		background: url('../../static/market/image-2.png') no-repeat;
		background-size: 100% 100%;
	}

	.tabbarTypeB {

		background: url('../../static/market/image-1.png') no-repeat;
		background-size: 100% 100%;
	}

	.keyOnUp {
		width: 100%;
		height: 76.91rpx;
		background: url('../../static/market/keyOnUp.png') no-repeat;
		background-size: 100% 100%;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 20rpx 0 20rpx;
		box-sizing: border-box;

		.text {
			font-weight: 400;
			font-size: 24rpx;
			color: #151822;
			margin-top: 16rpx;
		}

		.aKeyBtn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 136rpx;
			height: 50rpx;
			background: var(--tm-themeColor-level1);
			border-radius: 42rpx;
			font-weight: 400;
			font-size: 24rpx;
			color: #FFFFFF;
		}
	}

	.goodsContainer {
		display: flex;
		flex-direction: column;
		padding: 0 28rpx;
		width: 100%;
		flex: 1;
		box-sizing: border-box;

	}

	.prop {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		z-index: 10000;
		background: rgba(26, 26, 26, 0.45);

		.buyProp {
			padding-bottom: 40rpx;
			position: relative;
			display: flex;
			align-items: center;
			flex-direction: column;
			width: 560rpx;
			background: #FFFFFF;
			border-radius: 20rpx;

			.closeImg {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				top: 37rpx;
				right: 25rpx;
			}

			.title {
				margin-top: 38rpx;
				font-size: 30rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #1A1A1A;
				line-height: 42rpx;
			}

			.numTitle {
				margin-top: 46rpx;
				width: 470rpx;
				font-size: 26rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #000000;
				line-height: 37rpx;
			}

			.input-prop {
				margin-top: 12rpx;
				height: 88rpx;
				width: 470rpx;
				background: #F8F8F8;
				border-radius: 20rpx;
				padding: 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F2F2F2;
			}

			.placeholder {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #808080;
				line-height: 33rpx;
			}

			.sures {
				margin-top: 60rpx;
				text-align: center;
				line-height: 86rpx;
				width: 470rpx;
				height: 86rpx;
				background: var(--tm-themeColor-level1);
				border-radius: 20rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #151822;
			}

			.codes {
				position: absolute;
				right: 43rpx;
				bottom: 210rpx;
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: var(--tm-themeColor-level1-1);
				line-height: 33rpx;
			}
		}
	}
	.market-item[data-type='3']{
		opacity: 0.6;
	}
</style>